---
title: الأيقونات
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

قائمة بالأيقونات المستخدمة في جميع أنحاء تطبيقنا.

## Tabler Icons

نستخدم أيقونات Tabler لـ React في جميع أنحاء التطبيق.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

يمكنك استيراد كل أيقونة كمكون. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| المحددات    | النوع  | الوصف                            | الإعداد الافتراضي |
| ----------- | ------ | -------------------------------- | ----------------- |
| الحجم       | رقم    | ارتفاع وعرض الأيقونة بالبكسل     | 24                |
| اللون       | string | لون الأيقونات                    | currentColor      |
| الخط العريض | رقم    | عرض الخط العريض للأيقونة بالبكسل | ٢                 |

</Tab>

</Tabs>

## أيقونات مخصصة

بالإضافة إلى أيقونات Tabler، يستخدم التطبيق أيضًا بعض الأيقونات المخصصة.

### أيقونة دفتر العناوين

يعرض أيقونة دفتر العناوين.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| المحددات    | النوع | الوصف                            | الإعداد الافتراضي |
| ----------- | ----- | -------------------------------- | ----------------- |
| الحجم       | رقم   | ارتفاع وعرض الأيقونة بالبكسل     | 24                |
| الخط العريض | رقم   | عرض الخط العريض للأيقونة بالبكسل | ٢                 |

</Tab>

</Tabs>
